import React from "react";
import { Modal, SwipeAction, Toast } from "antd-mobile";
import type { Action } from "antd-mobile/es/components/swipe-action";
import { useEnhanceDispatch } from "@/hooks";
import { deleteOrder } from "@/store/modules/orderStore";
import "./OrderItem.scss";

interface OrderItemProps {
   order: any;
}

const OrderItem: React.FunctionComponent<OrderItemProps> = ({ order }) => {
   const enhanceDispatch = useEnhanceDispatch();
   const rightActions: Action[] = [
      {
         key: "show",
         text: "详情",
         color: "warning",
      },
      {
         key: "delete",
         text: "删除",
         color: "danger",
      },
   ];

   /**
    * @description 删除订单
    * */
   const onAction = async (action: Action, event: React.MouseEvent) => {
      if (action.key === "delete") {
         const result: boolean = await Modal.confirm({ content: "确认订单吗?" });
         if (!result) return;
         enhanceDispatch(deleteOrder(order.order_id));
         Toast.show("订单删除成功");

      } else if (action.key === "show") {

      }
   };
   return (
      <SwipeAction rightActions={rightActions} onAction={onAction}>
         <div className="order-item">
            <div className="info">
               <div className="good-img">
                  <img src={order.goods_image} alt="" />
               </div>
               <div className="good-name">
                  <span className="ellipsis-multi">{order.goods_name}</span>
                  <span>共{order.total_num}件商品总金额￥{order.total_price}</span>
               </div>
               <div className="count">
                  <span>￥{order.goods_price}</span>
                  <span>x{order.total_num}</span>
               </div>
            </div>
         </div>
      </SwipeAction>
   );
};

export default OrderItem;
